<!-- 基本信息 -->
<template>
	<view class="pd-lr30" :style="{ '--color': vuex_config.themeColor1 }">
		<template v-if="init">
			<u-form :model="form" ref="userInfo_form">
				<u-form-item label="自提联系人" label-width="160rpx" prop="username">
					<u-input :disabled="form.pk_id > 0?true:false" v-model="form.username" placeholder="请输入自提联系人" />
				</u-form-item>
				<u-form-item label="自提联系电话" label-width="190rpx" prop="phone">
					<u-input :disabled="form.pk_id > 0?true:false" v-model="form.phone" placeholder="请输入自提联系电话" />
				</u-form-item>
				<u-form-item label="自提微信号" label-width="160rpx" prop="weixin">
					<u-input :disabled="form.pk_id > 0?true:false" v-model="form.weixin" placeholder="请输入自提微信号" />
				</u-form-item>
				<!-- <u-form-item label="提货点管理ID" label-width="200rpx" prop="manage_id">
					<u-input v-model="form.manage_id" placeholder="请输入自提提货点管理ID" />
				</u-form-item> -->
				<u-form-item label="自提点名称" label-width="160rpx" prop="name">
					<view class="u-flex">
						<u-input :disabled="form.pk_id > 0?true:false" class="inpu_view" v-model="form.name"
							placeholder="请输入自提点名称" />
						<button v-if="form.pk_id > 0?false:true" class="u-reset-button get_address"
							@click="open()">获取地址</button>
					</view>
				</u-form-item>
				<u-form-item label="自提点地址" label-width="160rpx" prop="address">
					<view class="u-flex">
						<u-input :disabled="form.pk_id > 0?true:false" class="inpu_view" v-model="form.address"
							placeholder="请输入自提点地址" />
						<!-- <u-button class="u-m-l-20" @click="open()">获取地址</u-button> -->
					</view>
				</u-form-item>
				<u-form-item label="自提点坐标" label-width="160rpx" prop="coordinate">
					<view class="u-flex">
						<u-input :disabled="form.pk_id > 0?true:false" class="inpu_view" v-model="form.coordinate"
							placeholder="请输入自提点坐标" />
						<!-- <u-button class="u-m-l-20" @click="open()">获取坐标</u-button> -->
					</view>
				</u-form-item>
			</u-form>
			<view class="btn_box">
				<view class="post">
					<button class="btn" v-if="form.status == 1">审核通过</button>
					<button @click="submit" v-else class="btn">{{form.pk_id?'审核中':'提交申请'}}</button>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		uploadImage,

	} from '@/utils/upload';
	import {
		uniToast,
		uniChooseLocation
	} from '@/utils/uniPromise.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				init: false,
				disabled: false,
				form: {
					name: '',
					address: '',
					coordinate: '',
					username: '',
					phone: '',
					weixin: '',
					manage_id: '',
					status: 0,
				},
				rules: {
					name: [{
						required: true, //必填
						message: '请输入自提点名称',
						trigger: 'blur' //触发方法类型，支持多个方法
					}],
					username: [{
						required: true, //必填
						message: '请输入联系人',
						trigger: 'blur' //触发方法类型，支持多个方法
					}],
					address: [{
						required: true, //必填
						message: '请输入自提点地址',
						trigger: 'blur'
					}],
					phone: [{
						// 自定义验证函数
						validator: this.isMobile,
						message: '请正确输入手机号',
						trigger: 'blur'
					}],
					coordinate: [{
						required: true,
						message: '请输入自提点坐标',
						trigger: 'blur'
					}],
				},
				showPassWord: false
			};
		},
		onLoad(options) {
			this.initPage(options)
		},
		methods: {
			initPage(options) {
				if (this.vuex_user.delivery_address_id && this.vuex_user.delivery_address_id > 0) {
					this.$loading()
					this.$resPost('GetProductDeliveryAddress', {
						pk_id: Number(this.vuex_user.delivery_address_id)
					}).then(({
						data
					}) => {
						this.form = {
							...this.form,
							...data[0]
						}
						this.$hide()
						this.init = true
					})
				} else {
					this.init = true
				}
			},
			isMobile(rule, value, callback) {
				return this.$u.test.mobile(value);
			},
			open() {
				uniChooseLocation().then(res => {
					this.form.name = res.name
					this.form.address = res.address
					this.form.coordinate = res.latitude + ',' + res.longitude
				})
			},
			// 点击提交
			submit() {
				if (this.disabled) return
				if (this.form.pk_id) return
				this.$loading()
				this.$refs.userInfo_form.validate(valid => {
					if (!valid) {
						this.$hide()
						return
					}
					this.form.fk_business_id = this.vuex_business.pk_id
					this.form.manage_id = this.vuex_user.pk_id
					this.$AddNewData('b_product_delivery_address', this.form).then(res => {
						this.disabled = true
						this.$hide()
						uni.showToast({
							title: '申请成功',
							icon: 'success',
							duration: 1000,
							success: () => {
								setTimeout(() => {
									this.uniBack()
								}, 1000)
							}
						})
					})
				})
				// $UpdateModify
			},
		}
	};
</script>

<style lang="scss" scoped>
	.pd-lr30 {
		padding: 0 30rpx;
	}

	.inpu_view {
		flex: 1;
		overflow: hidden;
	}

	.get_address {
		margin-left: 20rpx;
		border: 2rpx solid #c0c4cc;
		border-radius: 10rpx;
		color: #606266;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		font-size: 26rpx;

		&:active {
			border-color: #2b85e4;
			color: #2b85e4;
			background-color: #ecf5ff;
		}
	}

	.btn_box {
		height: 100rpx;

		.post {
			z-index: 100;
			position: fixed;
			background-color: #fff;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				color: #fff;
				background-color: var(--color);
				width: 660rpx;
				height: 70rpx;
				line-height: 70rpx;
			}
		}
	}

	// h5的调整样式
	/deep/ .u-input__input {
		text-align: right;
	}

	/deep/ .u-form-item {
		text-align: right;
	}

	/deep/ .u-form-item--left__content__label {
		margin-left: 6rpx;
	}

	/deep/ .uni-input-wrapper {
		padding-left: 30rpx;
		box-sizing: border-box;
	}
</style>
